{% extends 'base.html' %}
{% block content %}
<div class="container py-4">
    <div class="card border-0 shadow-sm" style="max-width: 650px; margin: 2rem auto;">
        <div class="card-header bg-primary text-white py-3">
            <h3 class="h5 mb-0">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-link-45deg me-2" viewBox="0 0 16 16">
                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.774a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/>
                </svg>
                您的专属邀请链接
            </h3>
        </div>
        <div class="card-body p-4">
            <div class="input-group">
                <input type="text"
                       class="form-control form-control-lg border-end-0"
                       value="{{ invite_url }}"
                       id="inviteLink"
                       readonly
                       style="background-color: #f8f9fa;">
                <button class="btn btn-primary px-4"
                        type="button"
                        onclick="copyLink()"
                        data-bs-toggle="tooltip"
                        title="点击复制到剪贴板">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-clipboard me-2" viewBox="0 0 16 16">
                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
                    </svg>
                    复制链接
                </button>
            </div>

            <div class="alert alert-success mt-3 mb-0 py-2 d-none" id="copyAlert">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill me-2" viewBox="0 0 16 16">
                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                链接已复制！
            </div>

            <div class="bg-light rounded p-3 mt-4">
                <p class="text-muted small mb-2">💡 邀请奖励说明</p>
                <ul class="list-unstyled small mb-0">
                    <li class="d-flex align-items-center mb-2">
                        <span class="badge bg-success me-2">+50</span>
                        <span>用户流水1W送50积分</span>
                    </li>
                    <li class="d-flex align-items-center">
                        <span class="badge bg-success me-2">∞</span>
                        <span>链接永久有效</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
function copyLink() {
    const copyText = document.getElementById('inviteLink');
    const alertBox = document.getElementById('copyAlert');

    navigator.clipboard.writeText(copyText.value).then(() => {
        alertBox.classList.remove('d-none');
        setTimeout(() => alertBox.classList.add('d-none'), 2000);

        // 按钮微动效
        const btn = document.querySelector('[onclick="copyLink()"]');
        btn.classList.add('btn-success');
        setTimeout(() => btn.classList.remove('btn-success'), 200);
    });
}

// 初始化Bootstrap组件
document.addEventListener('DOMContentLoaded', function() {
    new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'));
});
</script>

<style>
.card {
    border-radius: 12px;
}
.form-control:focus {
    box-shadow: none;
    border-color: #86b7fe;
}
.btn-success {
    background-color: #198754 !important;
    border-color: #198754 !important;
    transition: all 0.15s ease;
}
</style>
{% endblock %}